<template>
    <view>
        <nav-bar ref="navBar" bgColor="themeBgColor" transparentFixedFontColor="#FFF" fontColor="#FFF" title="精品拼团"
            type="transparentFixed"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="nav_box" :style="{ paddingTop: statusBarHeight + 'px' }">
            <view class="product_classification_box">
                <!-- 商品类型筛选 -->
                <goods-type-select color="pink" @change="goodsTypeChange"></goods-type-select>
            </view>
        </view>
        <view class="product_sequencing">
            <view :class="{active:sortType == 3000}" @click="onSortType(3000)">智能排序</view>
            <view :class="{active:sortType == 3002}" @click="onSortType(3002)">好评优先</view>
            <view :class="{active:sortType == 3001}" @click="onSortType(3001)">低价优先</view>
            <view :class="{active:sortType == 3003}" @click="onSortType(3003)">销量优先</view>
        </view>
        <mescroll-body ref="mescrollRef" height="-186" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback"
            @up="upCallback">
            <view class="fight_list_container">
                <view>
                    <fight-goods-item v-for="(item,index) of fightList" :key="item.objId" :item="item" :index="index"></fight-goods-item>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
    import fightGoodsItem from '@/components/module/fight_goods_item.vue';
    import goodsTypeSelect from '@/components/module/goods_type_select';
    import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
    export default {
        mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
        components: {
            goodsTypeSelect,
            fightGoodsItem
        },
        data() {
            return {
                statusBarHeight: 0,
                downOption: {
                    auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                upOption: {
                    auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                fightList: [],
                sortType: 3000,
                typeId: ""
            };
        },
        //第一次加载
        onLoad(e) {
            //获取手机状态栏高度
            this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
        },
        //页面显示
        onShow() {},
        //方法
        methods: {
            onPageJump(url) {
                uni.navigateTo({
                    url: url
                });
            },
            onSelect(type) {
                this.select = type;
            },
            // 排序选择
            onSortType(val) {
                this.sortType = val;
                this.mescroll.triggerDownScroll();
            },
            goodsTypeChange(val) {
                this.typeId = val.objId;
                this.mescroll.triggerDownScroll();
            },
            /*下拉刷新的回调 */
            downCallback() {
                //联网加载数据
                this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                //联网加载数据
                this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    sortType: this.sortType
                };
                if (this.typeId) {
                    httpData.typeId = this.typeId;
                }
                this.$http
                    .post('api/mall/goods/v1/pt_list', httpData, {
                        load: false
                    }).then(res => {
                        uni.stopPullDownRefresh();
                        //方法一(推荐): 后台接口有返回列表的总页数 totalPage
                        this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)

                        if (pageNo == 1) {
                            this.fightList = res.data;
                        } else {
                            this.fightList = this.fightList.concat(res.data);
                        }
                    }).catch(() => {
                        //联网失败, 结束加载
                        this.mescroll.endErr();
                    });
            },
        },
        //页面隐藏
        onHide() {},
        //页面卸载
        onUnload() {},
        onPageScroll(e) {
            this.$refs.navBar.pageScroll(e);
        },
        //用户点击分享
        onShareAppMessage(e) {
            return this.wxShare();
        }
    };
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .nav_box {
        box-sizing: content-box;
        @include theme('gradient_bg');
        width: 100%;

        .product_classification_box {
            background-image: url('../../static/icon/spike_bg.png');
            background-position: center bottom;
            background-repeat: no-repeat;
            background-size: 100% auto;
            width: 100%;
            padding-top: 88rpx;
        }
    }

    .product_sequencing {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        width: 100%;
        @include theme('gradient_bg');
        font-size: 28rpx;

        >view {
            padding: 30rpx 40rpx;
            white-space: nowrap;
            color: #ffffff;
            opacity: 0.5;

            &:after {
                content: '';
                position: absolute;
                width: 2rpx;
                top: 40rpx;
                bottom: 36rpx;
                margin-left: 40rpx;
                background: #ffffff;
                opacity: 0.5;
            }
        }

        .active {
            opacity: 1;
        }
    }

    .fight_list_container {
        position: relative;

        >view {
            position: relative;
            z-index: 2;
        }

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            @include theme('gradient_bg');
            height: 416rpx;
        }

        &:after {
            content: '';
            position: absolute;
            top: 416rpx;
            left: 0;
            width: 100%;
            //@include bis('../../static/icon/theme/bg_list_b.png');
            height: 98rpx;
        }
    }
</style>
